WebXR plangjenkjenning: Mestre overflategjenkjenning og AR-plassering for et globalt publikum

WebXR tilbyr en kraftig inngangsport for å skape fengslende Augmented Reality (AR)-opplevelser direkte i nettleseren. En hjørnestein i mange AR-applikasjoner er plangjenkjenning, som lar applikasjonen din forstå den virkelige verden og sømløst integrere virtuelt innhold. Dette blogginnlegget gir en omfattende guide til WebXR plangjenkjenning, med fokus på overflategjenkjenning, AR-plasseringsteknikker og beste praksis for å skape inkluderende og effektive opplevelser som appellerer til et globalt publikum.

Hva er WebXR plangjenkjenning?

Plangjenkjenning er prosessen med å identifisere og forstå flate overflater i brukerens fysiske omgivelser ved hjelp av enhetens sensorer (vanligvis et kamera og bevegelsessensorer). WebXR utnytter disse sensorinngangene, sammen med datasynalgoritmer, for å lokalisere og spore horisontale og vertikale plan, som gulv, bord, vegger og til og med tak.

Når et plan er gjenkjent, kan WebXR-applikasjonen bruke denne informasjonen til å:

• Forankre virtuelle objekter til den virkelige verden, slik at de ser ut som om de virkelig er til stede i omgivelsene.
• Muliggjøre interaktive opplevelser der brukere kan manipulere virtuelle objekter i forhold til virkelige overflater.
• Gi realistisk belysning og skygger basert på det oppfattede miljøet.
• Implementere kollisjonsdeteksjon mellom virtuelle objekter og virkelige overflater.

Hvorfor er plangjenkjenning viktig for WebXR?

Plangjenkjenning er avgjørende for å skape fengslende og troverdige AR-opplevelser. Uten det ville virtuelle objekter bare sveve i luften, løsrevet fra brukerens omgivelser, noe som bryter illusjonen av utvidet virkelighet.

Ved nøyaktig å gjenkjenne og forstå overflater, lar plangjenkjenning deg lage AR-applikasjoner som er:

• Engasjerende: Virtuelle objekter føles som om de virkelig er en del av den virkelige verden.
• Interaktive: Brukere kan samhandle med virtuelle objekter på en naturlig og intuitiv måte.
• Nyttige: AR-applikasjoner kan tilby praktiske løsninger på virkelige problemer, som å visualisere møbler i et rom eller å måle avstander mellom objekter.
• Tilgjengelige: WebXR og plangjenkjenning muliggjør AR-opplevelser som er tilgjengelige på en rekke enheter uten å kreve at brukerne laster ned en dedikert app.

Hvordan WebXR plangjenkjenning fungerer

WebXR plangjenkjenning involverer vanligvis følgende trinn:

1. Forespørsel om plansporing: WebXR-applikasjonen ber om tilgang til enhetens AR-kapasiteter, inkludert plansporing.
2. Hente XRFrame: For hver ramme henter applikasjonen et `XRFrame`-objekt, som gir informasjon om den nåværende tilstanden til AR-økten, inkludert kameraposisjon og gjenkjente plan.
3. Spørre etter TrackedPlanes: `XRFrame`-objektet inneholder en liste med `XRPlane`-objekter, der hvert objekt representerer et gjenkjent plan i scenen.
4. Analysere XRPlane-data: Hvert `XRPlane`-objekt gir informasjon om planets:
• Orientering: Om planet er horisontalt eller vertikalt.
• Posisjon: Planets posisjon i 3D-verdenen.
• Utstrekning: Planets bredde og høyde.
• Polygon: En grensepolygon som representerer formen på det gjenkjente planet.
• Sist endret tid: Tidsstempel som indikerer når planets egenskaper sist ble oppdatert.
5. Rendring og interaksjon: Applikasjonen bruker denne informasjonen til å rendre virtuelle objekter på de gjenkjente planene og muliggjøre brukerinteraksjon.

WebXR plangjenkjennings-API-er og kodeeksempler

La oss se på noen kodeeksempler som bruker JavaScript og et populært WebXR-bibliotek som Three.js:

Initialisere WebXR-økten og be om plansporing

Først må du be om en "immersive" AR-økt og spesifisere at du ønsker å spore gjenkjente plan:

            
async function initXR() {
  if (navigator.xr) {
    const supported = await navigator.xr.isSessionSupported('immersive-ar');
    if (supported) {
      try {
        session = await navigator.xr.requestSession('immersive-ar', { 
          requiredFeatures: ['plane-detection'] 
        });
        // Sett opp WebGL-renderer og andre sceneelementer
      } catch (error) {
        console.error("Feil ved initialisering av XR-økt:", error);
      }
    } else {
      console.log('immersive-ar støttes ikke');
    }
  } else {
    console.log('WebXR støttes ikke');
  }
}

            

              
                Copy
              
            
          

Håndtering av XRFrame og TrackedPlanes

Inne i animasjonsløkken din må du få tilgang til `XRFrame` og iterere gjennom de gjenkjente planene:

            
function animate(time, frame) {
  if (frame) {
    const glLayer = session.renderState.baseLayer;
    renderer.render(scene, camera);

    const xrViewerPose = frame.getViewerPose(xrRefSpace);
    if (xrViewerPose) {
      // Oppdater kameraposisjon/-rotasjon basert på xrViewerPose

      const planes = session.getWorldInformation().detectedPlanes;
      if (planes) {
        for (const plane of planes) {
          // Få tilgang til plandata og oppdater det tilsvarende meshet i scenen din
          updatePlaneMesh(plane);
        }
      }
    }
  }
  session.requestAnimationFrame(animate);
}

            

              
                Copy
              
            
          

Lage et mesh for hvert gjenkjente plan

For å visualisere de gjenkjente planene, kan du lage et enkelt mesh (f.eks. en `THREE.Mesh`) og oppdatere geometrien basert på `XRPlane` sin utstrekning og polygon. Du må kanskje bruke en hjelpefunksjon som konverterer polygonets hjørnepunkter til et passende geometriformat for render-motoren din.

            
function updatePlaneMesh(plane) {
  if (!planeMeshes.has(plane.id)) {
    // Lag et nytt mesh hvis det ikke eksisterer
    const geometry = new THREE.PlaneGeometry(plane.width, plane.height);
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00, wireframe: true });
    const mesh = new THREE.Mesh(geometry, material);
    mesh.userData.plane = plane;

    scene.add(mesh);
    planeMeshes.set(plane.id, mesh);
  } else {
    // Oppdater det eksisterende meshets geometri basert på planets utstrekning.
    const mesh = planeMeshes.get(plane.id);
    const planeGeometry = mesh.geometry;
    planeGeometry.width = plane.width;
    planeGeometry.height = plane.height;
    planeGeometry.needsUpdate = true;

    // Posisjon og orientering for planet.
    const pose = frame.getPose(plane.planeSpace, xrRefSpace);
    mesh.position.set(pose.transform.position.x,pose.transform.position.y,pose.transform.position.z);
    mesh.quaternion.set(pose.transform.orientation.x,pose.transform.orientation.y,pose.transform.orientation.z,pose.transform.orientation.w);
  }


}

            

              
                Copy
              
            
          

AR-plasseringsteknikker: Forankring av virtuelle objekter

Når du har gjenkjent plan, kan du forankre virtuelle objekter til dem. Dette innebærer å plassere de virtuelle objektene i riktig posisjon og orientering i forhold til det gjenkjente planet. Det er flere måter å oppnå dette på:

Raycasting

Raycasting innebærer å sende en stråle fra brukerens enhet (vanligvis fra midten av skjermen) inn i scenen. Hvis strålen krysser et gjenkjent plan, kan du bruke krysningspunktet til å posisjonere det virtuelle objektet. Dette lar brukeren trykke på skjermen for å plassere et objekt på en ønsket overflate.

            
function placeObject(x, y) {
  const raycaster = new THREE.Raycaster();
  const mouse = new THREE.Vector2();

  mouse.x = (x / renderer.domElement.clientWidth) * 2 - 1;
  mouse.y = -(y / renderer.domElement.clientHeight) * 2 + 1;

  raycaster.setFromCamera(mouse, camera);

  const intersects = raycaster.intersectObjects(scene.children, true); // Søk rekursivt etter krysningspunkter.

  if (intersects.length > 0) {
    // Plasser objektet ved krysningspunktet
    const intersection = intersects[0];
    const newObject = createVirtualObject();
    newObject.position.copy(intersection.point);

    // Juster objektets orientering etter behov
    newObject.quaternion.copy(camera.quaternion);
    scene.add(newObject);
  }
}

            

              
                Copy
              
            
          

Bruke Hit-Test API (hvis tilgjengelig)

WebXR Hit-Test API gir en mer direkte måte å finne krysningspunkter mellom en stråle og den virkelige verden. Det lar deg sende en stråle fra brukerens synsvinkel og motta en liste med `XRHitResult`-objekter, der hvert objekt representerer et krysningspunkt med en virkelig overflate. Dette er mer effektivt og nøyaktig enn å kun stole på gjenkjente plan.

            
async function createHitTestSource() {
  hitTestSource = await session.requestHitTestSource({
    space: xrRefSpace
  });
}

function placeObjectAtHit() {
  if (hitTestSource) {
    const hitTestResults = frame.getHitTestResults(hitTestSource);
    if (hitTestResults.length > 0) {
      const hit = hitTestResults[0];
      const pose = hit.getPose(xrRefSpace);

      // Lag eller oppdater det virtuelle objektet
      const newObject = createVirtualObject();
      newObject.position.set(pose.transform.position.x,pose.transform.position.y,pose.transform.position.z);
      newObject.quaternion.set(pose.transform.orientation.x,pose.transform.orientation.y,pose.transform.orientation.z,pose.transform.orientation.w);
      scene.add(newObject);
    }
  }
}

            

              
                Copy
              
            
          

Forankring til plangrenser

Du kan også bruke polygonet som representerer planets grense til å posisjonere objekter langs kantene eller innenfor det gjenkjente planet. Dette kan være nyttig for å plassere virtuelle objekter i en bestemt konfigurasjon i forhold til planet.

Optimalisere WebXR plangjenkjenning for globale enheter

WebXR-applikasjoner må kjøre problemfritt på et bredt spekter av enheter, fra avanserte smarttelefoner til mindre kraftige mobilenheter. Å optimalisere implementeringen av plangjenkjenning er avgjørende for å sikre en god brukeropplevelse på tvers av ulike maskinvarekonfigurasjoner.

Ytelseshensyn

• Begrens antall plan: Å spore for mange plan kan være beregningsmessig krevende. Vurder å begrense antall plan som applikasjonen din aktivt sporer, eller prioriter plan som er nærmest brukeren.
• Optimaliser plan-mesh-geometri: Bruk effektive geometriske representasjoner for plan-meshene. Unngå overdreven detaljrikdom eller unødvendige hjørnepunkter.
• Bruk WebAssembly: Vurder å bruke WebAssembly (WASM) for å implementere beregningsintensive oppgaver, som plangjenkjenningsalgoritmer eller egendefinerte datasynrutiner. WASM kan gi betydelige ytelsesforbedringer sammenlignet med JavaScript.
• Reduser renderingsbelastning: Optimalisering av renderingen av hele scenen, inkludert virtuelle objekter og plan-mesher, er kritisk. Bruk teknikker som detaljnivå (LOD), okklusjons-culling og teksturkomprimering for å redusere renderingsbelastningen.
• Analyser og optimaliser: Analyser jevnlig applikasjonen din med nettleserens utviklerverktøy for å identifisere ytelsesflaskehalser. Optimaliser koden din basert på analyseresultatene.

Kryssplattform-kompatibilitet

• Funksjonsgjenkjenning: Bruk funksjonsgjenkjenning for å sjekke om enheten støtter plangjenkjenning før du prøver å bruke det. Tilby alternative mekanismer eller opplevelser for enheter som ikke støtter plangjenkjenning.
• ARCore og ARKit: WebXR-implementeringer er vanligvis avhengige av underliggende AR-rammeverk som ARCore (for Android) og ARKit (for iOS). Vær oppmerksom på forskjellene i plangjenkjenningskapasiteter og ytelse mellom disse rammeverkene.
• Enhetsspesifikke optimaliseringer: Vurder å implementere enhetsspesifikke optimaliseringer for å dra nytte av de unike egenskapene til forskjellige enheter.

Tilgjengelighetshensyn

Det er viktig å gjøre WebXR AR-opplevelser tilgjengelige for brukere med nedsatt funksjonsevne. For plangjenkjenning, vurder følgende:

• Visuell tilbakemelding: Gi tydelig visuell tilbakemelding når et plan blir gjenkjent, for eksempel ved å markere planet med en distinkt farge eller et mønster. Dette kan hjelpe brukere med nedsatt syn å forstå omgivelsene.
• Auditiv tilbakemelding: Gi auditiv tilbakemelding for å indikere når et plan er gjenkjent, for eksempel en lydeffekt eller en verbal beskrivelse av planets orientering og størrelse.
• Alternative inndatametoder: Tilby alternative inndatametoder for å plassere virtuelle objekter, som talekommandoer eller tastaturinndata, i tillegg til berøringsbevegelser.
• Justerbar plassering: La brukere justere posisjonen og orienteringen til virtuelle objekter for å imøtekomme deres individuelle behov og preferanser.

Beste praksis for global utvikling av WebXR plangjenkjenning

Å utvikle WebXR plangjenkjenningsapplikasjoner for et globalt publikum krever nøye vurdering av kulturelle forskjeller, språkstøtte og varierende enhetskapasiteter. Her er noen beste praksiser:

• Lokalisering: Lokaliser applikasjonens tekst- og lydinnhold for å støtte forskjellige språk. Bruk passende dato- og tallformater for ulike regioner.
• Kulturell sensitivitet: Vær oppmerksom på kulturelle forskjeller i hvordan brukere oppfatter og samhandler med AR-opplevelser. Unngå å bruke kulturelt sensitive symboler eller bilder.
• Tilgjengelighet: Følg retningslinjer for tilgjengelighet for å sikre at applikasjonen din er brukbar for personer med nedsatt funksjonsevne.
• Ytelsesoptimalisering: Optimaliser applikasjonens ytelse for å sikre at den kjører problemfritt på et bredt spekter av enheter.
• Testing: Test applikasjonen din grundig på forskjellige enheter og i forskjellige miljøer for å identifisere og fikse eventuelle problemer. Vurder å inkludere brukere fra forskjellige regioner og kulturelle bakgrunner i testprosessen din.
• Personvern: Kommuniser tydelig til brukerne hvordan dataene deres blir brukt, og sørg for at du overholder relevante personvernforskrifter.
• Gi klare instruksjoner: Gi klare og konsise instruksjoner om hvordan du bruker applikasjonen, og ta hensyn til ulike nivåer av teknisk kompetanse.

Eksempler på applikasjoner med WebXR plangjenkjenning

WebXR plangjenkjenning kan brukes til å lage et bredt utvalg av AR-applikasjoner, inkludert:

• Møbelvisualisering: Lar brukere visualisere hvordan møbler vil se ut i hjemmene deres før de kjøper. IKEA Place er et velkjent eksempel.
• Spill: Skaper engasjerende AR-spillopplevelser der virtuelle karakterer og objekter samhandler med den virkelige verden.
• Utdanning: Gir interaktive læringsopplevelser der elever kan utforske 3D-modeller og simuleringer i sitt eget miljø. For eksempel å visualisere solsystemet på et bord.
• Industrielle applikasjoner: Gjør det mulig for arbeidere å visualisere instruksjoner, plantegninger og annen informasjon direkte i synsfeltet, noe som forbedrer effektivitet og nøyaktighet.
• Detaljhandel: Lar kunder prøve virtuelle klær eller tilbehør før de kjøper dem. Sephora Virtual Artist er et godt eksempel.
• Måleverktøy: Lar brukere måle avstander og arealer i den virkelige verden ved hjelp av sine mobile enheter.

Fremtiden for WebXR plangjenkjenning

WebXR plangjenkjenning er et felt i rask utvikling. Etter hvert som enheter blir kraftigere og datasynalgoritmer forbedres, kan vi forvente å se enda mer nøyaktige og robuste plangjenkjenningsfunksjoner i fremtiden. Noen potensielle fremtidige utviklinger inkluderer:

• Forbedret nøyaktighet i plangjenkjenning: Mer nøyaktig og robust plangjenkjenning, selv i utfordrende omgivelser.
• Semantisk forståelse: Evnen til å forstå den semantiske betydningen av gjenkjente plan, for eksempel å skille mellom forskjellige typer overflater (f.eks. tre, metall, glass).
• Scenerekonstruksjon: Evnen til å lage en 3D-modell av hele miljøet, ikke bare flate overflater.
• AI-drevet plangjenkjenning: Utnyttelse av AI og maskinlæring for å forbedre ytelsen og nøyaktigheten til plangjenkjenning.
• Integrasjon med skytjenester: Integrasjon med skytjenester for å muliggjøre samarbeidende AR-opplevelser og delte virtuelle rom.

Konklusjon

WebXR plangjenkjenning er en kraftig teknologi som muliggjør opprettelsen av engasjerende og interaktive AR-opplevelser direkte i nettleseren. Ved å mestre overflategjenkjenning og AR-plasseringsteknikker, kan utviklere lage fengslende applikasjoner som appellerer til et globalt publikum. Ved å ta hensyn til ytelsesoptimalisering, tilgjengelighet og kulturell sensitivitet, kan du sikre at dine WebXR-applikasjoner er brukbare og underholdende for folk fra hele verden.

Ettersom WebXR-teknologien fortsetter å utvikle seg, vil plangjenkjenning spille en stadig viktigere rolle i å forme fremtiden for utvidet virkelighet. Fortsett å eksperimentere, vær nysgjerrig, og fortsett å flytte grensene for hva som er mulig med WebXR!